﻿<template>
  <el-tabs v-model="activeTag">
    <el-tab-pane
      label="表单信息"
      name="form"
    >
      <el-container :style="{height:containerHeight}">
        <el-container>
          <el-main>
            <h3 style="text-align:center">请假条申请单</h3>
            <el-form
              ref="editForm"
              label-width="120px"
              :model="entity"
              :rules="formRule"
              size="mini"
            >

              <el-divider>请假申请</el-divider>
              <div>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      label="申请单号:"
                    >
                      <wfNo
                        prefix="QJDH"
                        :no.sync="entity.no"
                        :active="isActiveNode('')"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="申请时间:"
                    >
                      <wfDateTime
                        :time.sync="entity.applyTime"
                        :active="isActiveNode('')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      label="申请人:"
                    >
                      <wfUserId
                        :user-id.sync="entity.applyUserId"
                        :active="isActiveNode('')"
                      />
                      <wfUserName
                        :user-name.sync="entity.applyUserName"
                        :active="isActiveNode('')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="15">
                    <el-form-item
                      label="请假时间:"
                      prop="dateTimeRange"
                    >
                      <el-date-picker
                        v-model="entity.dateTimeRange"
                        clearable
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :disabled="!isActiveNode('')"
                        @change="handlChange"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item>
                      <el-input
                        v-model="entity.timeDuration"
                        style="width:70px"
                        :disabled="true"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="2">小时</el-col>
                </el-row>

                <el-row>
                  <el-col>
                    <el-form-item
                      label="请假原因:"
                      prop="applyReason"
                    >
                      <el-input
                        v-model="entity.applyReason"
                        type="textarea"
                        :disabled="!isActiveNode('')"
                        :rows="2"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <el-divider>主管审批</el-divider>
              <div>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      label="主管审批人:"
                    >
                      <wfUserId
                        :user-id.sync="entity.directorUserId"
                        :active="isActiveNode('')"
                      />
                      <wfUserName
                        :user-name.sync="entity.directorUserName"
                        :active="isActiveNode('')"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="主管审批时间:"
                    >
                      <wfDateTime
                        :time.sync="entity.directorTime"
                        :active="isActiveNode('')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col>
                    <el-form-item
                      label="主管意见:"
                      prop="directorSuggestion"
                    >
                      <el-input
                        v-model="entity.directorSuggestion"
                        type="textarea"
                        :rows="2"
                        :active="isActiveNode('')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <el-divider>部门审批</el-divider>
              <div>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      label="部门审批人:"
                    >
                      <wfUserId
                        :user-id.sync="entity.departmentUserId"
                        :active="isActiveNode('')"
                      />
                      <wfUserName
                        :user-name.sync="entity.departmentUserName"
                        :active="isActiveNode('')"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="部门审批时间:"
                    >
                      <wfDateTime
                        :time.sync="entity.departmentTime"
                        :active="isActiveNode('')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col>
                    <el-form-item
                      label="部门意见:"
                      prop="departmentSuggestion"
                    >
                      <el-input
                        v-model="entity.departmentSuggestion"
                        type="textarea"
                        :rows="2"
                        :active="isActiveNode('')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <el-divider>人力审批</el-divider>
              <div>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      label="人力审批人:"
                    >
                      <wfUserId
                        :user-id.sync="entity.hrUserId"
                        :active="isActiveNode('')"
                      />
                      <wfUserName
                        :user-name.sync="entity.hrUserName"
                        :active="isActiveNode('')"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="人力审批时间:"
                    >
                      <wfDateTime
                        :time.sync="entity.hrTime"
                        :active="isActiveNode('')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col>
                    <el-form-item
                      label="人力审批说明:"
                      prop="hrSuggestion"
                    >
                      <el-input
                        v-model="entity.hrSuggestion"
                        type="textarea"
                        :rows="2"
                        :active="isActiveNode('')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

            </el-form>
          </el-main>
        </el-container>
        <el-aside v-if="dialogAction !== 'create'" width="200px">
          <div style="padding:10px">
            <el-form label-position="top">
              <el-form-item label="审批结果:">
                <el-radio-group v-model="verificationFinally" class="verification">
                  <div>
                    <el-radio :label="1">同意</el-radio></div>
                  <div>
                    <el-radio :label="2">不同意</el-radio></div>
                  <div>
                    <el-radio :label="3">驳回</el-radio></div>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="备注:">
                <el-input
                  v-model="verificationOpinion"
                  type="textarea"
                  :rows="5"
                />
              </el-form-item>
            </el-form>
          </div>
        </el-aside>

      </el-container>
    </el-tab-pane>
    <el-tab-pane
      label="流程信息"
      name="flow"
    >
      <el-container>
        <el-container>
          <div id="flowViewPanel">1</div>
        </el-container>
        <el-aside v-if="dialogAction !== 'create'" width="300px">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-aside>
      </el-container>
    </el-tab-pane>
  </el-tabs></template>
<script>
require('@/vendor/flow/gooflow')
require('@/utils/flowlayout')

import WfNo from '@/components/WorkFlow/WfNo'
import wfDateTime from '@/components/WorkFlow/WfDateTime'
import wfUserName from '@/components/WorkFlow/WfUserName'
import wfUserId from '@/components/WorkFlow/WfUserId'
import moment from 'moment'

export default {
  name: 'ApplyOrVerificationLeaveReqForm',
  components: { WfNo, wfDateTime, wfUserName, wfUserId },
  props: {
    entity: {
      type: Object,
      default: () => { return { 'no': '' } }
    },
    rdn: {
      type: Number,
      default: 0
    },
    dialogAction: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      activeTag: 'form',
      editEntity: { no: '' },
      activityNodeName: '',
      verificationFinally: 1,
      verificationOpinion: '',
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }],
      formRule: {
        dateTimeRange: [{ required: true, message: this.L('FieldIsRequired', undefined, '时间范围'), trigger: 'blur' }],

        applyReason: [{ required: true, message: this.L('FieldIsRequired', undefined, '申请原因'), trigger: 'blur' }]
      }
    }
  },
  computed: {
    containerHeight() {
      return (document.body.clientHeight - 230) + 'px'
    }
  },
  watch: {
    async entity(val) {
      if (val.id) {
        for (var e in this.entity) {
          this.editEntity[e] = null
        }
      }
    },
    activeTag(val) {
      console.log(val)
      var schemeContent = { 'title': 'newFlow_1', 'nodes': [{ 'name': 'node_1', 'left': 177, 'top': 36, 'type': 'start round mix', 'id': '1575903164024', 'width': 26, 'height': 26, 'alt': true }, { 'name': 'node_2', 'left': 272, 'top': 357, 'type': 'end round', 'id': '1575903165185', 'width': 26, 'height': 26, 'alt': true }, { 'name': '主管审批', 'left': 144, 'top': 127, 'type': 'node', 'id': '1575903165967', 'width': 104, 'height': 36, 'alt': true, 'setInfo': { 'NodeName': '主管审批', 'NodeCode': 'node_3', 'NodeRejectType': '1', 'NodeDesignate': 'SPECIAL_ROLE', 'NodeConfluenceType': 'all', 'ThirdPartyUrl': '', 'SelectedOrgnization': null, 'id': '1575903165967', 'NodeDesignateData': { 'users': [], 'roles': [1], 'orgs': [] }}}, { 'name': '部门审批', 'left': 55, 'top': 226, 'type': 'node', 'id': '1577023903494', 'width': 104, 'height': 36, 'alt': true, 'setInfo': { 'NodeName': '部门审批', 'NodeCode': 'node_7', 'NodeRejectType': '1', 'NodeDesignate': 'SPECIAL_USER', 'NodeConfluenceType': 'all', 'ThirdPartyUrl': '', 'SelectedOrgnization': 2, 'id': '1577023903494', 'NodeDesignateData': { 'users': [1], 'roles': [], 'orgs': [] }}}, { 'name': '人力审批', 'left': 232, 'top': 276, 'type': 'node', 'id': '1577023904311', 'width': 104, 'height': 36, 'alt': true, 'setInfo': { 'NodeName': '人力审批', 'NodeCode': 'node_8', 'NodeRejectType': '1', 'NodeDesignate': 'SPECIAL_USER', 'NodeConfluenceType': 'all', 'ThirdPartyUrl': '', 'SelectedOrgnization': 2, 'id': '1577023904311', 'NodeDesignateData': { 'users': [1], 'roles': [], 'orgs': [] }}}], 'lines': [{ 'type': 'sl', 'from': '1575903164024', 'to': '1575903165967', 'id': '1575903168799', 'name': '', 'dash': false }, { 'type': 'sl', 'from': '1575903165967', 'to': '1577023903494', 'id': '1577023952646', 'name': '请假天数>=3', 'Compares': [{ 'Operation': '>=', 'FieldName': 'timeDuration', 'FieldType': null, 'Value': '3' }], 'dash': false }, { 'type': 'tb', 'M': 223.5, 'from': '1575903165967', 'to': '1577023904311', 'id': '1577024000350', 'name': '请假天数<3', 'Compares': [{ 'Operation': '<', 'FieldName': 'timeDuration', 'FieldType': null, 'Value': '3' }], 'dash': false }, { 'type': 'lr', 'M': 187.5, 'from': '1577023903494', 'to': '1577023904311', 'id': '1577024001942', 'name': '', 'dash': false }, { 'type': 'sl', 'from': '1577023904311', 'to': '1575903165185', 'id': '1577024003294', 'name': '', 'dash': false }], 'areas': [], 'initNum': 16 }
      $('#flowViewPanel').flowdesign({
        height: 600,
        widht: 600,
        top: 100,
        haveTool: false,
        isprocessing: true,
        activityId: '1564334154471',
        nodeData: schemeContent.nodes,
        flowcontent: schemeContent
      })
    }
  },
  async mounted() {
    // console.log(this.$store.state.session.user)
    // this.editEntity.no = await this.generateNoAsync('QJ')
    // this.editEntity.applyTime = moment().format('YYYY-MM-DD hh:mm')
  },
  methods: {
    // ...mapActions('noGenerate', ['generateNoAsync']),
    isActiveNode(nodeName = '') {
      return nodeName === this.activityNodeName ? this.rdn : 0
    },
    // isActiveNode1: (() => {
    //   var rdn = Math.random()
    //   console.log(rdn)
    //   return function(nodeName) {
    //     console.log(0, nodeName, nodeName === this.activityNodeName)
    //     // if (rdn) return rdn

    //     return nodeName === this.activityNodeName ? rdn : 0
    //   }
    // })(),

    clearValidate() {
      this.$refs.editForm.clearValidate()
    },
    validate(cb) {
      this.$refs.editForm.validate(cb)
    },
    handlChange(d) {
      this.entity.beginTime = d && moment(d[0]).format('YYYY-MM-DD hh:mm:ss') || null
      this.entity.endTime = d && moment(d[1]).format('YYYY-MM-DD hh:mm:ss') || null

      if (d && d[0] && d[1]) {
        this.entity.timeDuration = (moment(d[1]).diff(moment(d[0]), 'minutes') / 60).toFixed(2)
      } else {
        this.entity.timeDuration = 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/vendor/flow/GooFlow.css";
.verification {
  div{
    margin:10px 0
  }
}
</style>
